<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>codefun</title>
    <link rel="stylesheet" href="../../index.css" />
    <link rel="stylesheet" href="staff.css" />
      <script>
          // 定义一个函数来获取博客列表数据
          function get() {
              // 使用JavaScript的fetch API发送HTTP请求获取数据
              fetch('http://localhost:8080/pojo?param2=cus') // 替换为你的后端接口地址
                  .then(response => response.json())
                  .then(data => {
                      // 将获取到的数据添加到HTML页面中的列表元素中
                      const blogList = document.getElementById('blogList');
                      const plot =document.getElementById('plot');
                      // 将 JSON 对象转换为一个数组
                      const dataArray = Object.values(data);
                      console.log(dataArray[2].length);

                      console.log(dataArray[2]);
                      const div2= document.createElement('div2');
                      dataArray[2].forEach(blog => {
                          const div1 = document.createElement('div1');

                          const length = dataArray[2].length;

                          div1.innerHTML = `      <div class="flex-row justify-between group_10">
              <div class="flex-row items-center self-center space-x-16">
                <img
                  class="image_8"
                  src="${blog.avatarUrl}"
                />
                <div class="flex-col items-start group_11 space-y-10">
                  <span class="font_7">${blog.name}  ${blog.gender}</span>
                    <span class="font_9 text_13">微信昵称:${blog.nickName}</span>
                    <span class="font_9 text_13">${blog.phone}</span>
                </div>
              </div>
              <div class="flex-row items-center self-start group_12 space-x-34">
                <div class="flex-col justify-start items-center text-wrapper_4">
                  <span class="font_8">Messages</span>
                </div>
                <img
                  class="image_9"
                  src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/653141d85a7e3f0310825e56/653efd83f9a7df0012204c27/16986273124543368992.png"
                />
              </div>
            </div>
            <img
              class="shrink-0 image_11"
              src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/653141d85a7e3f0310825e56/653efd83f9a7df0012204c27/16986273131828408247.png"
            />`; // 注意这里改为遍历data数组并访问每个博客对象的属性
                          div2.innerHTML = `<div class="flex-col justify-start items-center shrink-0 text-wrapper_3">
                    <span class="font_4 text_9">${length}</span>
                  </div>`;
                          blogList.appendChild(div1);
                          plot.appendChild(div2);
                      });
                  })
                  .catch(error => {
                      console.error("Failed to fetch blogs:", error);
                  });
          }
          get(); // 调用函数以发送请求并填充数据
      </script>

  </head>
  <body>
    <div class="flex-row page">

      <div class="flex-col flex-auto self-start space-y-31">

        <div class="flex-col group_5">
          <div class="flex-row justify-between items-center group_6">
            <div class="flex-row items-center space-x-8">
              <span class="text_7">Users</span>
                <ul id="plot"></ul>
            </div>
              <div class="flex-row space-x-42">
                  <div class="flex-row items-center section_4 space-x-16">
                      <img
                              class="image_5"
                              src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/653141d85a7e3f0310825e56/653efd83f9a7df0012204c27/16986273103809872555.png"
                      />
                      <span class="font_1 text_8">Search..</span>
                  </div>
<!--                  <div class="flex-row items-center">-->
<!--                      <div class="flex-row space-x-18">-->
<!--                          <img-->
<!--                                  class="image_6"-->
<!--                                  src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/653141d85a7e3f0310825e56/653efd83f9a7df0012204c27/f84c9faa97a90733afdcc78db0c4ef41.png"-->
<!--                          />-->
<!--                          <div class="flex-col group_8">-->
<!--                              <div class="section_5"></div>-->
<!--                              <div class="section_5"></div>-->
<!--                              <div class="section_5"></div>-->
<!--                          </div>-->
<!--                      </div>-->
<!--                      <div class="flex-col justify-start items-start text-wrapper_2">-->
<!--                          <span class="font_5 text_10">Add New Users</span>-->
<!--                      </div>-->
<!--                  </div>-->
              </div>
          </div>

          <div class="flex-col section_6">

              <ul id="blogList"></ul>


          </div>
        </div>
      </div>
    </div>
  </body>
</html>